<?php
echo $this->Html->css('fileupload/jquery.fileupload.css');
echo $this->Html->css('fileupload/jquery.fileupload-ui.css');
?>
<style type="text/css">
    /*.progress-bar {
        float: left;
        width: 0;
        height: 100%;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #428bca;
        -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
        -webkit-transition: width .6s ease;
        transition: width .6s ease;
    }
    .progress.active .progress-bar {
        -webkit-animation: progress-bar-stripes 2s linear infinite;
        animation: progress-bar-stripes 2s linear infinite;
    }
    .progress-striped .progress-bar-success {
        background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
        background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    }
    .progress-striped .progress-bar {
        background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
        background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
        background-size: 40px 40px;
    }
    .progress-bar-success {
        background-color: #5cb85c;
    }
    .label-danger{
        background-color: #d9534f;
    }
    .text-danger {
        color: #d9534f;
    }
    .table th, .table td {
        padding: 4px;
    }
    .table tbody tr td span.preview a img {
        width: 50% !important;
    }*/

</style>
    <!--<p>Example of File upload manager, click the button below</p>
    <button
        class="btn btn btn-info btn-rounded start-file-upload-manager"
        data-url='<?php /* echo $this->Html->url(array('controller' => 'Organisation', 'action' => 'attach_files')); */ ?>'
        data-save_to='img/org_20'
        data-max-filesize='3000000'
        data-filetypes='/(\.|\/)(gif|jpe?g|png)$/i'
        data-extra_params_callback='index.test_extra_param_callback'
        data-callback='index.test_callback'>Test File Upload Manager
    </button>-->

<!-- Include this element before the views js loads !>
<?php /* echo $this->element('file_upload_manager'); */ ?>

<!-- Modal -->
<div class="modal fade" id="attachment_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 820px;">
        <div class="modal-content">
            <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
                <div class="modal-header">
                    <h4 class="modal-title">File Upload Manager</h4>
                    <!--<p>Upload and assign images to members and visitors</p>-->
                </div>
                <div class="modal-body">
                    <p class="table-title"></p>
                    <table id="ajax_upload_table" role="presentation" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Preview</th>
                                <th>File</th>
                                <th>Size/Progress</th>
                                <th>Action/Info</th>
                            </tr>
                        </thead>
                        <tbody class="files"></tbody>
                    </table>
                    <!--<input type="hidden" name="upload_by" id="upload_by" value="">
                    <input type="hidden" name="upload_save_to" id="upload_save_to" value="">
                    <input type="hidden" name="upload_filetypes" id="upload_filetypes" value="">
                    <input type="hidden" name="upload_maxfilesize" id="upload_maxfilesize" value="">-->
                </div>

                <div class="modal-footer fileupload-buttonbar">

                    <button class="btn btn-sm btn-success fileinput-button">
                        <i class="fa fa-plus"></i>
                        <span>Add files...</span>
                        <input type="file" name="files[]" multiple />
                    </button>
                    
                    <button type="submit" class="btn btn-sm btn-primary start">
                        <i class="fa fa-cloud-upload"></i>
                        <span>Start upload</span>
                    </button>
                    
                    <button type="reset" class="btn btn-sm btn-warning cancel" id="cancel_attachment_btn">
                        <i class="fa fa-ban"></i>
                        <span>Cancel upload</span>
                    </button>
                    <!--<button type="button" id="export-window-btn" class="btn btn-primary">Export Now</button>-->
                    <a href="#attachment_modal" id="close_attachment_btn" class="btn btn-sm btn-white" data-dismiss="modal">Close</a>

                    <!--<a href='#' class="btn pull-left btn-info" id="upload-btn"><i class="fa fa-upload"></i> Upload Images</a>

                    <a href="#" class="btn btn-primary" id="save_apply"><i class="fa fa-save"></i> Save & Assign</a>
                    <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>-->
                </div>
            </form>
        </div>
    </div>
</div>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
    <td>
    <span class="preview"></span>
    </td>
    <td>
    <p class="name">{%=file.name%}</p>
    <strong class="error text-danger"></strong>
    </td>
    <td>
    <p class="size">Processing...</p>
    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
    </td>
    <td>
    {% if (!i && !o.options.autoUpload) { %}
    <button class="btn btn-primary start" disabled>
    <i class="fa fa-cloud-upload"></i>
    <span>Start</span>
    </button>
    {% } %}
    {% if (!i) { %}
    <button class="btn btn-warning cancel">
    <i class="fa fa-ban"></i>
    <span>Cancel</span>
    </button>
    {% } %}
    </td>
    </tr>
    {% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
    <td>
    <span class="preview">
    {% if (file.thumbnailUrl) { %}
    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
    {% } %}
    </span>
    </td>
    <td>
    <p class="name">
    {% if (file.url) { %}
    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
    {% } else { %}
    <span>{%=file.name%}</span>
    {% } %}
    </p>
    {% if (file.error) { %}
    <div><span class="label label-danger">Error</span> {%=file.error%}</div>
    {% } %}
    </td>
    <td>
    <span class="size">{%=o.formatFileSize(file.size)%}</span>
    </td>
    <td>
    {% if (file.deleteUrl) { %}
    <span>{%=file.upload_by%}</span>
    <!--<span>({%=file.upload_from%})</span>-->
    <!--</button>
    <input type="checkbox" name="delete" value="1" class="toggle">-->
    {% } else { %}
    <!-- <button class="btn btn-warning cancel">
    <i class="fa fa-ban"></i>
    <span>Cancel</span>
    </button>-->
    {% } %}
    </td>
    </tr>
    {% } %}
</script>
<?php
echo $this->Html->script('fileupload/jquery.ui.widget.js');
echo $this->Html->script('fileupload/tmpl.min.js');
echo $this->Html->script('fileupload/load-image.min.js');
echo $this->Html->script('fileupload/canvas-to-blob.min.js');
echo $this->Html->script('fileupload/jquery.iframe-transport.js');
echo $this->Html->script('fileupload/jquery.fileupload.js');
echo $this->Html->script('fileupload/jquery.fileupload-process.js');
echo $this->Html->script('fileupload/jquery.fileupload-image.js');
echo $this->Html->script('fileupload/jquery.fileupload-audio.js');
echo $this->Html->script('fileupload/jquery.fileupload-video.js');
echo $this->Html->script('fileupload/jquery.fileupload-validate.js');
echo $this->Html->script('fileupload/jquery.fileupload-ui.js');
echo $this->Html->script('fileupload/multiple_uploads.js');
?>